/*
* @moudule:@/views/budget/bigOrder/index
* @author:zengfx
* @date:2020-11-26
*/
<template>
  <div class="bigOrder_container">
    <header>
      <p>大单监控</p>
      <!-- <el-button size="mini" @click="handle_back">返回</el-button> -->
    </header>
    <main>
      <el-form :inline="true" :model="form" class="main_searchBar" ref="form">
        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="form.areaId" :position="'5'" ref="cascader" />
        </el-form-item>
        <el-form-item label="月份:">
          <el-date-picker size="mini" v-model="form.startDate" value-format="yyyyMM" type="month" placeholder="选择月份" :picker-options="pickerBeginDateBefore"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否码号:">
            <el-checkbox v-model="form.codeNum"></el-checkbox>
        </el-form-item>
        <!-- <el-form-item label="结束日期:">
          <el-date-picker size="mini" v-model="form.endDate" value-format="yyyyMM" type="month" placeholder="选择结束日期" :picker-options="pickerBeginDateAfter"></el-date-picker>
        </el-form-item>-->
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="table">
        <el-tabs v-model="tabActive" type="card" style="margin-top: 10px;">
          <el-tab-pane label="计费大单" name="list1"></el-tab-pane>
          <el-tab-pane label="oocp大单" name="list2"></el-tab-pane>
        </el-tabs>
        <div v-show="tabActive=='list1'">
          <el-table
           
            id="table1"
            size="mini"
            :header-cell-style="{ background: '#eef1f6' }"
            :data="tableData1"
            v-loading="tableLoading"
            style="width: 100%;"
            border
          >
            <el-table-column
              :width="item.width"
              align="center"
              v-for="(item, index) in titleList1"
              :key="index"
              :label="item.name"
              :prop="item.prop"
              :fixed="(index == 0 || index == 1) ? tableFixed : false"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>
        <div v-show="tabActive=='list2'">
          <el-table
           
            id="table2"
            size="mini"
            :header-cell-style="{ background: '#eef1f6' }"
            :data="tableData2"
            v-loading="tableLoading"
            style="width: 100%;"
            border
          >
            <el-table-column
              :width="item.width"
              align="center"
              v-for="(item, index) in titleList2"
              :key="index"
              :label="item.name"
              :prop="item.prop"
              :fixed="(index == 0 || index == 1) ? tableFixed : false"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </div>

        <div class="page" v-if="tabActive=='list1'">
            <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="list1.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="list1.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="list1.total"
            ></el-pagination>
         </div>
        <div class="page" v-if="tabActive=='list2'">
            <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="list2.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="list2.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="list2.total"
            ></el-pagination>
         </div>
        
      </div>
    </main>
  </div>
</template>

<script>
// 引入导出Excel表格依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import { $budgetAPI } from '@/api';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
import { getCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI";
const exportUrl = prefixAPI.pack;
export default {
    data() {
        return {
            form: {
                areaId: '',
                startDate: '',
                codeNum: false,
                // endDate: ''
            },
            list1: {
                total: 0,
                pageNum: 1,
                pageSize: 10
            },
            list2: {
                total: 0,
                pageNum: 1,
                pageSize: 10
            },
            // 开始时间disabled
            pickerBeginDateBefore: {
                disabledDate: time => {
                    return time.getTime() > Date.now();
                }
            },
            // 结束时间disabled
            // pickerBeginDateAfter: {
            //     disabledDate: time => {
            //         return time.getTime() > Date.now();
            //     }
            // },
            currentDate: '',
            height: '',
            tabActive: 'list1',
            titleList1: [
                {
                    name: '分局名称',
                    prop: 'c4_NAME',
                    width: 120
                },
                {
                    name: '支局名称',
                    prop: 'c5_NAME',
                    width: 120
                },
                {
                    name: '日期',
                    prop: 'fc_DATE',
                    width: 160
                },
                {
                    name: '2.0资产编号',
                    prop: 'serv_ID',
                    width: 120
                },
                {
                    name: '3.0资产编号',
                    prop: 'serv_NEWID',
                    width: 120
                },
                {
                    name: '资产号码',
                    prop: 'phone_ID',
                    width: 140
                },
                {
                    name: '客户名称',
                    prop: 'custName',
                    width: 140
                },
                // {
                //     name: '五级科目ID',
                //     prop: 'acct_ITEM_5_ID',
                //     width: 120
                // },
                // {
                //     name: '五级科目名称',
                //     prop: 'acct_ITEM_5_NAME',
                //     width: 180
                // },
                {
                    name: '四级科目ID',
                    prop: 'acct_ITEM_4_ID',
                    width: 120
                },
                {
                    name: '四级科目名称',
                    prop: 'acct_ITEM_4_NAME',
                    width: 180
                },
                {
                    name: '出账金额',
                    prop: 'unpay_FEE',
                    width: 120
                },
                {
                    name: '税后出账金额',
                    prop: 'aft_TAX_FEE',
                    width: 120
                },
                {
                    name: '是否包年分摊 1为是',
                    prop: 'is_SHARE',
                    width: 100
                },
                {
                    name: '分摊开始日期',
                    prop: 'start_DATE',
                    width: 160
                },
                {
                    name: '分摊结束日期',
                    prop: 'end_DATE',
                    width: 160
                },
                {
                    name: '财务指标编码',
                    prop: 'remark',
                    width: 120
                },
                {
                    name: '指标名称',
                    prop: 'vertical_INDEX_NAME',
                    width: 160
                }
            ],
            titleList2: [
                {
                    name: '分局名称',
                    prop: 'c4_NAME',
                    width: 120
                },
                {
                    name: '支局名称',
                    prop: 'c5_NAME',
                    width: 120
                },
                // {
                //     name: '日期',
                //     prop: 'fC_DATE',
                //     width: 160
                // },
                {
                    name: '2.0资产编号',
                    prop: 'serv_ID',
                    width: 120
                },
                {
                    name: '3.0资产编号',
                    prop: 'serv_NEWID',
                    width: 120
                },
                {
                    name: '资产号码',
                    prop: 'phone_ID',
                    width: 140
                },
                {
                    name: '客户名称',
                    prop: 'custName',
                    width: 140
                },
                {
                    name: '订单编号',
                    prop: 'bill_ID_RESETS',
                    width: 180
                },
                {
                    name: '缴费时间',
                    prop: 'pay_DATE',
                    width: 160
                },
                {
                    name: '优惠编码',
                    prop: 'discount_ID',
                    width: 160
                },
                {
                    name: '优惠名称',
                    prop: 'fee_ITEM_NAME',
                    width: 160
                },
                {
                    name: '优惠金额',
                    prop: 'unpay_FEE',
                    width: 100
                },
                {
                    name: '税后优惠金额',
                    prop: 'aft_TAX_FEE',
                    width: 100
                },
                {
                    name: '是否包年分摊 1为是',
                    prop: 'is_SHARE',
                    width: 100
                },
                {
                    name: '分摊开始日期',
                    prop: 'start_DATE',
                    width: 160
                },
                {
                    name: '分摊结束日期',
                    prop: 'end_DATE',
                    width: 160
                },
                {
                    name: '财务指标编码',
                    prop: 'remark',
                    width: 140
                },
                {
                    name: '指标名称',
                    prop: 'vertical_INDEX_NAME',
                    width: 140
                }
            ],
            tableData1: [],
            tableData2: [],
            tableLoading: false,
            accountInfo: null,
            tableFixed: true,
        };
    },
    methods: {
        handleSizeChange1(val) {
            this.list1.pageSize = val;
            this.getBill();
        },
        handleCurrentChange1(val) {
            this.list1.pageNum = val;
            this.getBill();
        },
        handleSizeChange2(val) {
            this.list2.pageSize = val;
            this.getOrder();
        },
        handleCurrentChange2(val) {
            this.list2.pageNum = val;
            this.getOrder();
        },
        getHeight() {
           // this.height = window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 51 - 40 - 10;
        },
        // changeTime() {
        //     let self = this;
        //     self.form.endDate = '';
        //     self.pickerBeginDateAfter = {
        //         disabledDate(time) {
        //             let timeyear = time.getFullYear();
        //             let timemonth = time.getMonth() + 1;
        //             if (timemonth >= 1 && timemonth <= 9) {
        //                 timemonth = '0' + timemonth;
        //             }
        //             let currentTime = timeyear.toString() + timemonth.toString();
        //             if (currentTime < self.form.startDate || currentTime > self.currentDate) {
        //                 return true;
        //             }
        //         }
        //     };
        // },
        getCurrentTimeStr() {
            var currentDate = new Date();
            var currentTimeStrBefore = null;
            var currentTimeStr = null;
            var year = currentDate.getFullYear().toString();
            var mm = currentDate.getMonth() + 1;
            var month = mm < 10 ? '0' + mm : mm;
            // var month = (currentDate.getMonth() + 1).toString();
            currentTimeStrBefore = year + month;
            currentTimeStr = year + month;
            this.currentDate = currentTimeStr;
            this.form.startDate = currentTimeStrBefore;
            // this.form.endDate = currentTimeStr;
        },
        handle_search() {
            this.tableLoading = true;
            switch (this.tabActive) {
                case 'list1':
                    this.getBill();
                    break;
                case 'list2':
                    this.getOrder();
                    break;
            }
        },
        // 导出
        handle_export() {

            var areaId = this.form.areaId,
                startDate = this.form.startDate,
                token = getCookie("token");

            window.open(`${exportUrl}/BigOrderController/ExportOrderData?areaId=${areaId}&startDate=${startDate}&token=${token}`, "_self");
            // var that = this;

            // that.tableFixed = false;

            // that.loading = this.$loading({
            //     lock: true,
            //     text: "导出中",
            //     spinner: "el-icon-loading",
            //     background: "rgba(0, 0, 0, 0.7)",
            // });

            
            // setTimeout(()=>{
            //     let workbook = XLSX.utils.book_new();
            //     let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), { raw: true });
            //     XLSX.utils.book_append_sheet(workbook, ws1, '计费大单');
            //     let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#table2'),  { raw: true });
            //     XLSX.utils.book_append_sheet(workbook, ws2, 'oocp大单');
            //     let wbout = XLSX.write(workbook, {
            //         bookType: 'xlsx',
            //         bookSST: true,
            //         type: 'array'
            //     });
            //     try {
            //         FileSaver.saveAs(
            //             new Blob([wbout], {
            //                 type: 'application/octet-stream'
            //             }),
            //             '大单监控.xlsx'
            //         );
            //         that.loading.close();
            //     } catch (e) {
            //         if (typeof console !== 'undefined') console.log(e, wbOut);
            //     }
            //     that.tableFixed = true;
            //     return wbout;
            // }, 200)
        },
        getBill() {
            $budgetAPI.getBill(
                {
                    areaId: this.form.areaId,
                    startDate: this.form.startDate,
                    isPage: true,
                    codeNum: Number(this.form.codeNum),
                    pageNum: this.list1.pageNum,
                    pageSize: this.list1.pageSize,
                },
                res => {
                    if (res.code == 0) {
                            this.tableData1 = res.content.data;
                            this.list1.total = res.content.total;
                    }
                    this.tableLoading = false;
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        getOrder() {
            $budgetAPI.getOrder(
                {
                    areaId: this.form.areaId,
                    startDate: this.form.startDate,
                    isPage: true,
                    codeNum: Number(this.form.codeNum),
                    pageNum: this.list2.pageNum,
                    pageSize: this.list2.pageSize,
                },
                res => {
                    if (res.code == 0) {
                            this.tableData2 = res.content.data;
                            this.list2.total = res.content.total;
                    }
                    this.tableLoading = false;
                },
                err => {
                    this.tableLoading = false;
                }
            );
        },
        getInitData() {
            this.tableLoading = true;
            this.getBill();
            this.getOrder();
        }
    },
    mounted() {
        // this.getHeight();
        // 获取账户信息
        this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        this.form.areaId = this.accountInfo.parentId == 5 ? +this.accountInfo.parentId : this.accountInfo.areaId;
        this.getCurrentTimeStr();
        this.getInitData();
    },
    created() {
        // window.addEventListener('resize', this.getHeight);
    },
    destroyed() {
        // window.removeEventListener('resize', this.getHeight);
    }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
/deep/ .el-cascader-panel{
    height: 200px;
    background-color: red;
}
</style>